Component({
  properties: {
    isShow: {
      type: Boolean,
      value: !1,
      observer: function (t) {
        t ? this.showCard() : this.closeCard(this.data.activeIndex);
      },
    },
    activeIndex: { type: Number, value: 0 },
  },
  data: {
    list: [
      {
        style:
          "position: absolute;bottom: 75%;left: 26%;width: 40px;height: 40px;transform: rotate(45deg);",
        textStyle: "position: absolute;bottom: 64%;left: 26%;",
        iconStyle: "top: -42rpx;left: 49rpx;",
        text: "一号坑",
      },
      {
        style:
          "position: absolute;bottom: 22%;right: 28%;width: 28px;height: 58px;transform: rotate(38deg);",
        textStyle: "position: absolute;bottom: 12%;right: 28%;",
        iconStyle: "top: -43rpx;left: -48rpx;",
        text: "二号坑",
      },
      {
        style:
          "position: absolute;bottom: 36.5%;left: 37%;width: 30px;height: 60px;transform: rotate(28deg);",
        textStyle: "position: absolute;bottom: 28%;left: 30%;",
        iconStyle: "top: -43rpx;left: 48rpx;",
        text: "三号坑",
      },
      {
        style:
          "position: absolute;bottom: 59%;left: 48%;width: 24px;height: 24px;transform: rotate(38deg);",
        textStyle: "position: absolute;bottom: 50%;left: 48%;",
        iconStyle: "top: -43rpx;left: 48rpx;",
        text: "四号坑",
      },
      {
        style:
          "position: absolute;bottom: 18%;left: 41.5%;width: 21px;height: 21px;transform: rotate(36deg);",
        textStyle: "position: absolute;bottom: 10%;left: 39%;",
        iconStyle: "top: -43rpx;left: 48rpx;",
        text: "五号坑",
      },
      {
        style:
          "position: absolute;bottom: 22%;left: 27%;width: 20px;height: 26px;transform: rotate(39deg);",
        textStyle: "position: absolute;bottom: 13%;left: 20%;",
        iconStyle: "top: -43rpx;left: 48rpx;",
        text: "六号坑",
      },
      {
        style:
          "position: absolute;bottom: 17.5%;left: 26%;width: 50px;height: 32px;transform: rotate(40deg);",
        textStyle: "position: absolute;bottom: 8%;left: 30%;",
        iconStyle: "top: -43rpx;left: 48rpx;",
        text: "七号坑",
      },
      {
        style:
          "position: absolute;bottom: 7.5%;left: 50.5%;width: 54px;height: 34px;transform: rotate(34deg);",
        textStyle: "position: absolute;bottom: 0%;left: 50.5%;",
        iconStyle: "top: -43rpx;left: 48rpx;",
        text: "八号坑",
      },
    ],
  },
  methods: {
    onCloseModal: function () {
      this.closeCard(this.data.activeIndex);
    },
    closeCard: function (t) {
      var e = this,
        o = wx.createAnimation({ duration: 500, timingFunction: "ease" });
      o.translateY(600).step(), this.setData({ animationData: o.export() });
      var i = setTimeout(function () {
        clearTimeout(i), (i = 0), e.triggerEvent("onClose", { activeIndex: t });
      }, 220);
    },
    showCard: function () {
      var t = this,
        e = wx.createAnimation({ duration: 400, timingFunction: "ease" }),
        o = setTimeout(function () {
          e.translateY(0).step(),
            t.setData({ animationData: e.export() }),
            clearTimeout(o),
            (o = 0);
        }, 100);
    },
    selectArea: function (t) {
      var e = t.currentTarget.dataset.index;
      this.data.activeIndex !== e && this.closeCard(e);
    },
  },
});
